<template>
  <div class="home">
    <n-layout position="absolute" has-sider>
      <n-layout-sider
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
        :native-scrollbar="false"
        bordered
      >
        <div class="title" :class="[collapsed ? 'tiny-title' : '']">M<a>O</a>X</div>
        <n-menu
          @update:value="menuRoute"
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
          key-field="id"
          label-field="name"
          accordion
        />
      </n-layout-sider>
      <n-layout>
        <n-layout-header style="height: 64px" bordered>
          <div class="header">
            <n-popover :show="showAvatarPopup" placement="bottom" trigger="manual">
              <template #trigger>
                <n-badge class="avatar" value="999+">
                  <n-avatar
                    round
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F37%2Fe8%2F2c%2F37e82c9568c76ef3a2ba54cb857164e8.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645932118&t=9097f4e749508f2e22f0eec63db1fecd"
                    @click="avatarPopup"
                  />
                </n-badge>
              </template>
              <div class="avatar-popup" style="min-width: 200px">
                <div style="padding: 10px 0; margin-bottom: 10px; border-bottom: 1px solid #eeeeee11">客户信息</div>
                <div>账号：1054717708@qq.com</div>
                <div style="text-align: right; margin: 6px 0">
                  <n-button size="tiny" @click="quit">退出</n-button>
                </div>
              </div>
            </n-popover>
          </div>
        </n-layout-header>
        <n-layout-content position="absolute" style="top: 64px">
          <router-view />
        </n-layout-content>
      </n-layout>
    </n-layout>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from "vue"
import { useRouter } from "vue-router"
import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NMenu, NPopover, NBadge, NAvatar, NButton } from "naive-ui"
import { userStore, systemStore } from "@/store"

const router = useRouter()
const api = getCurrentInstance()?.appContext.config.globalProperties.$api

const collapsed = ref(false)
const menuOptions = ref([])
const showAvatarPopup = ref(false)

const avatarPopup = () => {
  showAvatarPopup.value = !showAvatarPopup.value
}

onMounted(async () => {
  let status = localStorage.getItem("IS_LOGIN")

  if (Boolean(status) !== true) {
    router.push({ path: "/login" })
  } else {
    console.log("base url --- ", import.meta.env.VITE_API_URL)
    let response: any = await api.menuList()
    menuOptions.value = response.data.data
  }
})

const menuRoute = (key: any, item: any) => {
  router.push({ path: item.path })
}

const quit = () => {
  localStorage.removeItem("IS_LOGIN")
  router.replace({ path: "/login" })
}
</script>

<style lang="less" scoped>
.home {
  height: 100vh;

  .title {
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    font-size: 2.4rem;
    color: #fff;
    font-weight: bold;
    font-family: "Courier New";
    letter-spacing: 6px;
    user-select: none;
    transition: all 0.2s ease-in;

    a {
      color: #f44;
    }
  }

  .tiny-title {
    font-size: 0.9rem;
    transition: all 0.2s ease-in;
  }

  .header {
    height: 100%;
    display: flex;
    align-items: center;

    .avatar {
      margin: 0 30px 0 auto;
    }

    .avatar-popup {
      height: 400px;
      width: 400px;
    }
  }
}
</style>
